<template>
  <div class="box">
    <div class="g-bd">
      <!-- 分类列表 -->
      <div class="rditype">
        <i class="iconfont icon-left-arrow"></i>
        <i class="iconfont icon-zuoyoujiantou"></i>
        <div class="boxes">
          <ul>
            <li
              v-for="(item,index) in cartInfo"
              :key="index"
            >
              <a
                href="#"
                class="carta"
                :class='{cartnow:index===qwer}'
                @click.prevent="gocartdj(item.id,index)"
              >
                <img v-lazy="item.pic56x56Url">
                <!-- <i class="iconfont icon-qinggan"></i> -->
                <span>{{item.name}}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 节目 -->
      <div
        class="rditop"
        v-show="showpar"
      >
        <div class="ft">
          <div class="u-title">推荐节目</div>
          <div class="more">更多&nbsp;&gt;</div>
          <ul>
            <li
              v-for="(item,index) in  djtuijian"
              :key="index"
            >
              <a
                href="#"
                class="pic"
              >
                <img v-lazy="item.coverUrl">
              </a>
              <div class="cnt">
                <p
                  class="name f-thide"
                  @click.prevent="goDj(item.id)"
                >{{item.name}}</p>
                <p class="desc f-thide">{{item.dj.nickname}}</p>
              </div>
              <a
                href="#"
                class="info"
              >{{item.radio.category}}</a>
            </li>
          </ul>
        </div>

        <div class="ft">
          <div class="u-title">节目排行榜</div>
          <div class="more">更多&nbsp;&gt;</div>
          <ul>
            <li
              v-for="(item,index) in jiemuTop"
              :key="index"
            >
              <div class="rank">
                <span class="num">{{index+1}}</span>
                <i
                  class="iconfont"
                  v-if="item.lastRank===-1"
                ></i>
                <!-- 排名下降 -->
                <i
                  class="iconfont iconfont2"
                  v-else-if="item.lastRank-item.rank<0"
                >{{item.rank-item.lastRank}}</i>
                <!-- 排名上升 -->
                <i
                  class="iconfont iconfont3"
                  v-else-if="item.lastRank-item.rank>0"
                >{{item.lastRank-item.rank}}</i>
              </div>
              <a
                href="#"
                class="pic pic2"
              >
                <img v-lazy="item.program.blurCoverUrl">
              </a>
              <div class="cnt nosim">
                <p
                  class="name f-thide"
                  @click.prevent="goDj(item.program.id)"
                >{{item.program.mainSong.name}}</p>
                <p class="desc f-thide">{{item.program.radio.name}}</p>
              </div>
              <span class="hot">
                <i :style="'width:'+(item.score/maxScore)*100+'px!important;'"></i>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 分类电台 -->
      <div v-show="showpar">
        <div
          class="rdimore"
          v-for="(item,index) in djList"
          :key="item.id"
        >
          <div class="u-title">{{item.name}}·电台</div>
          <div class="more">更多&nbsp;&gt;</div>
          <ul>
            <li
              v-for="(i,index2) in (dj[index] || []).slice(0,4)"
              :key="1+index2"
            >
              <a
                href="#"
                class="left"
                @click.prevent="goDjDetail(i.id)"
              >
                <img v-lazy="i.picUrl">
              </a>
              <div class="right">
                <p
                  class="tit"
                  @click="goDjDetail(i.id)"
                >{{i.name}}</p>
                <p class="des">{{i.rcmdtext}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      qwer: -1,
      showpar: true,
      // 分类列表
      cartInfo: [],
      // 电台推荐
      djtuijian: [],
      // 节目排行榜
      jiemuTop: [],
      djList: [
        { name: '音乐推荐', id: 2 },
        { name: '生活', id: 6 },
        { name: '情感', id: 3 },
        { name: '创作翻唱', id: 2001 },
        { name: '知识', id: 11 }
      ],
      dj: [],
      maxScore: 0
    }
  },
  created () {
    this.getcartInfo()
    this.gettuijianInfo()
    this.getjiemuInfo()
    this.getdjInfo()
  },
  watch: {
    // 监听路径
    $route (to, from) {
      console.log(to.path);
      if (to.path === '/discover/djradio') {
        this.$router.go(0);
      }
    }
  },
  methods: {
    async getcartInfo () {
      let res = await axios.get('https://autumnfish.cn//dj/catelist')
      // console.log(res)
      this.cartInfo = res.data.categories
    },
    async gettuijianInfo () {
      let res = await axios.get('https://autumnfish.cn//program/recommend')
      // console.log(res)
      this.djtuijian = res.data.programs
    },
    async getjiemuInfo () {
      let res = await axios.get('https://autumnfish.cn//dj/program/toplist?limit=10')
      // console.log(res)
      this.jiemuTop = res.data.toplist
      // console.log('this.jiemuTop')
      // console.log(this.jiemuTop)
      this.maxScore = this.jiemuTop[0].score
    },
    async getdjInfo () {
      for (let i = 0; i < this.djList.length; i++) {
        let res = await axios.get('https://autumnfish.cn//dj/recommend/type?type=' + this.djList[i].id)
        // console.log(res)
        this.dj[i] = res.data.djRadios

      }
      // console.log(this.dj)
    },
    gocartdj (id, ind) {
      this.$router.push({ path: '/discover/djradio/category', query: { id: id } })
      this.showpar = false;
      this.qwer = ind
      // document.getElementsByClassName('carta')[ind].classList.add('cartnow')
    },
    goDjDetail (id) {
      // console.log(id)
      this.$router.push({ path: '/djradio', query: { id: id } })
    },
    goDj (id) {
      this.$router.push({ path: '/program', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.cartnow {
  border: 1px solid red;
  border-radius: 4px;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
  height: 33px;
  font-size: 20px;
  line-height: 28px;
}
.more {
  font-size: 12px;
  color: #999;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.more:hover {
  text-decoration: underline;
}
.g-bd {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  padding: 40px;
  .rditype {
    margin-bottom: 20px;
    position: relative;
    .boxes {
      height: 194px;
      ul {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        align-items: center;
        li {
          margin: 0 0 25px 33px;
          a {
            display: block;
            width: 70px;
            height: 70px;
            text-align: center;
            color: #888;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
              width: 48px;
              height: 48px;
              margin: 2px auto 0;
            }
            // .iconfont {
            //   display: inline-block;
            //   font-size: 30px;
            //   margin: 2px auto 0;
            // }
            span {
              font-size: 12px;
              margin-top: 3px;
            }
          }
        }
        .carta:hover {
          background-color: pink;
        }
      }
    }
    .icon-left-arrow {
      position: absolute;
      left: 0;
      top: 73px;
      font-size: 25px;
    }
    .icon-zuoyoujiantou {
      position: absolute;
      right: 0;
      top: 73px;
      font-size: 25px;
    }
  }
  .rditop {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ft {
      width: 426px;
      position: relative;

      ul {
        height: 600px;
        border: 1px solid #e2e2e2;
        border-top: none;
        li {
          width: 424px;
          height: 40px;
          padding: 10px 0;
          line-height: 40px;
          display: flex;
          justify-content: left;
          align-items: center;
          .pic {
            margin-left: 20px;
            width: 40px;
            height: 40px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .pic2 {
            margin-left: 0;
          }
          .cnt {
            width: 254px;
            margin: 1px 0 0 10px;
            line-height: 20px;
            .name {
              font-size: 12px;
              color: #666;
            }
            .desc {
              font-size: 12px;
              color: #999;
            }
          }
          .nosim {
            width: 208px;
          }
          .info {
            margin: 1px 0 0 10px;
            display: inline-block;
            height: 16px;
            overflow: hidden;
            padding: 0 6px;
            border: 1px solid #999;
            line-height: 16px;
            color: #999;
            vertical-align: middle;
            font-size: 12px;
          }
          .rank {
            width: 47px;
            margin: 6px 0 0 0;
            text-align: center;
            line-height: normal;
            color: #999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .num {
              font-size: 14px;
              color: #c20c0c;
            }
            .iconfont {
              display: inline-block;
              width: 16px;
              height: 17px;
              background-image: url(../../../assets/image/icon.png);
              background-position: -67px -283px;
              font-style: normal;
              font-size: 12px;
            }
            .iconfont2 {
              width: 6px;
              height: 6px;
              background-position: -74px -324px;

              color: skyblue;
            }
            .iconfont3 {
              width: 6px;
              height: 6px;
              background-position: -74px -304px;
              color: #ba2226;
            }
          }
          .hot {
            display: block;
            height: 8px;
            width: 100px;
            background-image: url(../../../assets/image/table.png);
            background-position: 0 -240px;
            line-height: normal;
            i {
              display: block;
              height: 8px;
              width: 50%;
              overflow: hidden;
              padding: 0 4px;
              background-image: url(../../../assets/image/table.png);
              background-position: right -318px;
              background-color: #c6c6c6;
            }
          }
        }
        li:nth-child(odd) {
          background-color: #f7f7f7;
        }
      }
    }
  }
  .rdimore {
    margin-top: 35px;
    position: relative;
    ul {
      margin-left: -30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      align-items: center;
      li {
        width: 435px;
        height: 120px;
        margin-left: 30px;
        padding: 20px 0;
        border-bottom: 1px solid #e7e7e7;
        display: flex;
        justify-content: left;
        align-items: center;
        .left {
          display: block;
          width: 120px;
          height: 120px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          margin-left: 20px;
          .tit {
            margin: 16px 0 20px;
            font-size: 18px;
          }
          .tit:hover {
            text-decoration: underline;
          }
          .des {
            margin-bottom: 6px;
            line-height: 20px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
